<template>
  <div>
    <!-- 顶部导航栏 -->
    <el-header class="custom-header">
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        router
        background-color="#fdf6e3"
        text-color="#5d4037"
        active-text-color="#ff7043"
        class="custom-menu"
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/photos">图片管理</el-menu-item>
        <el-menu-item index="/posts">帖子管理</el-menu-item>
        <el-menu-item index="/users">用户管理</el-menu-item>
        <el-menu-item index="/events">活动管理</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 页面内容 -->
    <el-main class="custom-main">
      <router-view />
    </el-main>
  </div>
</template>

<script>
export default {
  name: "LayoutMenu",
};
</script>

<style scoped>
/* 顶部导航栏样式 */
.custom-header {
  position: fixed;
  width: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #fefcf5, #fdf6e3);
  border-bottom: 1px solid #ebe5d9;
}

/* 菜单样式 */
.custom-menu {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.custom-menu .el-menu-item {
  transition: all 0.3s ease;
}

.custom-menu .el-menu-item:hover {
  background-color: #fff7e6;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 页面内容样式 */
.custom-main {
  padding-top: 80px; /* 留出导航栏高度 */
  min-height: calc(100vh - 80px);
  background: #fafafa;
  padding: 20px;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  animation: fade-in 0.5s ease-in-out;
}

/* 动画效果 */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

